<script setup lang="ts">
import { reactive,ref,nextTick,onMounted} from 'vue'
import { ArrowUndoOutline,Close,CopyOutline,Remove,LockOpenOutline,LockClosedOutline,LogoGithub,ArrowBackOutline,ArrowForward  } from '@vicons/ionicons5'
import { IPC } from 'root/common/constants'
import {  useNotification  } from 'naive-ui'
import { _history,_detail } from '@/api/api'
import { useRequest } from 'alova'
const notification = useNotification()

const props = defineProps({
    data: {} as any
});

const data =  reactive({
  top:false,
  move_h:0,
  menu:true,
  dtl: [] as any[],
  ep_name:"",
  pages_now:0,
  pages_all:0,
  last_id:"",
  next_id:"",
  select_ep_id:"",
  innerWidth:1000
});


async function on_select_ep(ep_id:any){
      data.select_ep_id = ep_id
      const { onSuccess }  = useRequest(_detail.comic_dtl({
        id: ep_id, 
      }))
      onSuccess((res:any) => {
        img_list.value.scrollTo(0,0)
        data.ep_name  = res.data.name 
        data.dtl = res.data.img_lst
        data.pages_all = data.dtl.length
        data.last_id = res.data.last_id
        data.next_id = res.data.next_id
        props.data.his_name="上次观看到"+data.ep_name
        props.data.ep_firstid=ep_id
      });        
}

 
async function on_his(ep_id:string){
      const { onSuccess }  = useRequest(_history.addHis({
        cover:props.data.eps.cover,
        name:props.data.eps.name,
        type_id: props.data.comic_id, 
        other: ep_id, 
        type: props.data.type, 
        scrolltop:props.data.scrolltop
      }))
      onSuccess((res:any) => {
        msg(res.data.message)
      });      
}

function add_his(){
  on_his(data.select_ep_id)
}

const msg= (message:any)=> {
    notification['success']({
      content: message,
      duration: 1000,
      keepAliveOnHover: true
    })
}

const on_close = () =>  {
  props.data.drawer = false 
}

const show_menu = () =>  {
  data.menu = data.menu?false:true
}

const img_list = ref<any>({});
const get_max = () => {
  nextTick(()=>{
    max.value = innerRef.value!.clientHeight-600
  })
}


const innerRef = ref<HTMLDivElement>()
const max = ref(0)
const value = ref(0)

const inputSlider = (value: number) => {
  img_list.value.scrollTo({
      top: value,
      left: 0,
    })
}
const scroll = (event:any) => {
   value.value = event.target.scrollTop
   data.move_h=event.target.scrollTop
   props.data.scrolltop=data.move_h
   get_max()
}
const formatTooltip = (value: number) => {
  let bfb = 0
  if(max.value>0){
    bfb = Math.ceil(value/max.value*100)
    data.pages_now = Math.ceil(bfb*data.pages_all/100)
  }
  return `${bfb} %`
}

const setWindows = async (e:String) => {
    await window.ipcRenderer.invoke(IPC.ELECTRON_WINDOWS, e)
    if(e=="top"){ data.top=true}
    if(e=="notop"){ data.top=false}
}

const getwindow_size = async() => {
  if(window.innerWidth<400){
    data.innerWidth = window.innerWidth 
  }
}

onMounted(async () => {
  getwindow_size()
  await on_select_ep(props.data.ep_id)  
  setTimeout(() => {
    img_list.value.scrollTo({
      top: parseInt(props.data.scrolltop),
      left: 0,
      behavior: "smooth"
    })

  }, 200)
});

defineExpose({
  add_his,
});
</script>

<template>
  <div style="position: relative;">
      <div class="pages_top" v-show="data.menu">
        <div style="width: 200px;">
          <div class="button">
            <n-icon size="20" @click="on_close()"><ArrowUndoOutline /> </n-icon> 
          </div>
        </div>
        <div>{{props.data.eps.name}}-{{data.ep_name}} &nbsp;({{data.pages_now}}/{{data.pages_all}}) </div>
        <div style="width: 200px;display: flex;justify-content: end;" v-if="data.innerWidth>400">
          <n-space class="windows-bar on_nomove">
            <n-icon size="20" class="button-item" @click="setWindows('notop')" v-if="data.top"><LockClosedOutline /></n-icon>
            <n-icon size="20" class="button-item" @click="setWindows('top')" v-else><LockOpenOutline /> </n-icon>
            <n-icon size="20" class="button-item" @click="setWindows('minimize')"><Remove /> </n-icon>
            <n-icon size="20" class="button-item" @click="setWindows('maximize')"><CopyOutline /> </n-icon>
            <n-icon size="20" class="button-item" @click="setWindows('close')"><Close /> </n-icon>
          </n-space>
        </div>
      </div>
      
      <div class="pages_bottom on_nomove" v-show="data.menu">
        <div style="width: 200px;">
          <n-button type="primary" @click="on_select_ep(data.last_id)" v-if="data.last_id!=''" style="color: #fff;">
              <n-icon size="18"><ArrowBackOutline /></n-icon>&nbsp;上一集
          </n-button>
        </div>
        <div style="width: 1000px;">
          <n-slider v-model:value="value" :step="10" :max="max" :on-update:value="inputSlider" :format-tooltip="formatTooltip" :show-tooltip="data.menu">
            <template #thumb>
              <n-icon-wrapper :size="24" :border-radius="12">
                <n-icon :size="18" :component="LogoGithub" color="#fff"/>
              </n-icon-wrapper>
            </template>
          </n-slider>
        </div>
        <div style="width: 200px;display: flex;justify-content: end;">
          <n-button strong   type="primary"  @click="on_select_ep(data.next_id)" v-if="data.next_id!=''"  style="color: #fff;">
            下一集&nbsp;<n-icon size="18"><ArrowForward /></n-icon>
           </n-button>
        </div>
      </div>


      <n-scrollbar @click="show_menu()" :style="'width:'+data.innerWidth+'px'" style="margin: auto;height:100vh;position: relative;" ref="img_list"  trigger="none" :on-scroll="scroll"> 
        <div ref="innerRef">
          <div class="img_list" v-for="url in data.dtl">
            <img :src="url"  />
          </div>
        </div>
      </n-scrollbar>
  </div>
</template>

<style lang="scss" scoped>  

.img_list{
  width: 100%;
  margin: 0;
  img{
    width: 100% !important;
    display: block;
    margin: 0;
  }
}
.slider{
    position: absolute;
    bottom:0px;
    width:100%;
    font-size: 14px;
    height:30px;
    line-height:30px;
    text-align: center;
    border-radius: 5px;
    cursor:pointer;
    z-index: 99999;
    padding: 0 20px;
}

.pages_top{
    position: absolute;
    left:0px;
    top:0px; 
    z-index: 99999;
    width: 100%;
    background-color: #181818;
    height: 50px;
    display: flex;
    padding: 5px;
    align-items: center;
    justify-content: space-between;
}
.button{
  width: 40px;
      padding: 10px;
      cursor: pointer;
      line-height: 0;
      transition:all .3s ease-out 0s;
      border-radius: 5px;
      color:#807f7f5d;
    }
.button:hover{
  background-color:  var(--hover2);
}
.windows-bar{
      display: flex;
      align-items: center;
      justify-content: end;
      margin-right: 10px;
      margin-top: 5px;
      .button-item{
        padding: 4px;
        cursor: pointer;
        transition:all .3s ease-out 0s;
        border-radius: 3px;
        &:hover{
          background-color: var(--hover2);
        }
      }
    }

   .pages_bottom{
    position: absolute;
    left:0px;
    bottom:0px; 
    z-index: 99999;
    width: 100%;
    background-color: #181818;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: space-between; 
    padding: 5px 10px; 
   }

   .light-mode { 
    .pages_bottom,.pages_top{
      background-color: transparent;
      backdrop-filter: blur(40px);
    }
}
   
</style>